<script setup lang="ts">
const props = defineProps<{
  word: string,
  color?: string,
  bgColor?: string
}>()

</script>

<template>
  <span class="word" :style="{
    color: props.color,
    backgroundColor: props.bgColor
  }">{{props.word}}</span>
</template>

<style scoped>
.word {
  white-space: nowrap;
  border-radius: 6px;
  background-color: #ffffff55;
  /* color: #fff; */
  width: fit-content;
  font-size: 1.2rem;
  padding: 3px 8px;
  margin-right: 8px;
  margin-bottom: 8px;
}
</style>